<template>
    <div class="wrapper">
            <!--header部分-->
            <header>
                <p>商家信息</p> 
            </header>
            <page-rollback></page-rollback>
            <!--商家图片部分-->
            <div class="business-logo">
                <img :src = "business.businessImg">
            </div>

            <!--商家信息部分-->
            <div class="business-info">
                <h1>{{ business.businessName }}</h1>
                <p>{{this.$formatMoney(business.starPrice, '￥')}}起送{{this.$formatMoney(business.deliveryPrice, '￥')}}配送</p>
                <p>{{business.businessExplain}}</p>
            </div>

            <!--食品列表部分-->
            <ul class="food">
                <li v-for="(item, index) in foodArr" :key = item.id>
                    <div class="food-left">
                        <img :src = "item.foodImg">
                        <div class="food-left-info">
                            <h3>{{ item.foodName }}</h3>
                            <p>{{ item.foodExplain }}</p>
                            <p>{{this.$formatMoney(item.foodPrice, '￥')}}</p>
                        </div>
                    </div>
                    <div class="food-right">
                        <div>
                            <i class="fa fa-minus-circle" @click="minus(index)" v-show="item.quantity!=0" ></i>
                        </div>
                        <p><span v-show="item.quantity!=0">{{item.quantity}}</span></p>
                        <div>
                            <i class="fa fa-plus-circle" @click="add(index)"></i>
                        </div>
                    </div>
                </li>
            </ul>

            <!--购物车部分-->
            <div class="cart">
                <div class="cart-left">
                    <div class="cart-left-icon" :style="totalQuantity === 0?'background-color:#505051;':'background-color:#3190E8;'">
                        <i class="fa fa-shopping-cart"></i>
                        <div class="cart-left-icon-quantity"  v-show="totalQuantity!=0">{{totalQuantity}}</div>
                    </div>
                    <div class="cart-left-info">
                        <p>{{this.$formatMoney(totalPrice, '￥')}}</p>
                        <p>另需配送费{{this.$formatMoney(business.deliveryPrice, '')}}元</p>
                    </div>
                </div>
                <div class="cart-right">
                    <!--达到起送价格-->
                    <div class="cart-right-item" @click="toOrder" v-show="totalSettle >= business.starPrice">
                        去结算
                    </div>
                    <!--未达到起送价格-->
                    <div class = "cart-right-item" v-show="totalSettle < business.starPrice" style="background-color: #535356;cursor: default;"> 
                        {{this.$formatMoney(business.starPrice, '￥')}}起送
                        </div>
                    -->
                </div>
            </div>
        </div> 
</template>

<script>
import PageRollback from '@/components/PageRollback.vue';
export default {
    name:'BusinessInfo',
    data(){
        return{
            businessId: this.$route.query.businessId,
            business:{},
            foodArr: [],
            user: {}
        }
    },
    created(){
        //获取用户信息
        this.user = this.$getSessionStorage('user');

        let url = `/BusinessController/getBusinessById/${this.businessId}`;
        //根据businessId查询商家信息
        this.$axios.get(url)
        .then(response => {
            this.business = response.data.result;
        })
        .catch(error =>{
            console.error(error);
        });

        let url_food = `/FoodController/listFoodByBusinessId/${this.businessId}`;
        //根据businessId查询商家所属的食品信息
        this.$axios.get(url_food)
        .then(response => {
            this.foodArr = response.data.result;
            //初始化，使得食品购物车都为0
            for(let i = 0; i < this.foodArr.length; i++){
                this.foodArr[i].quantity = 0;
            }
            //如果已经登录，查询购物车是否已经选购了某个食品
            if(this.user != null){
                this.listCart();
            }
        })
        .catch(error =>{
            console.error(error);
        });

    },
    methods:{
        listCart(){
            // console.log('token is ' + this.user.token.token);
            let url_listCart = `/CartController/listCart/${this.user.token.token}`;
            this.$axios.get(url_listCart
            // ,{
            //     headers:{
            //         'Authorization': `Bearer ${this.user.token.token}` 
            //     }
            // }
            )
            .then(response => {
                let cartArr = response.data.result;
                //遍历所有食品列表
                for (let foodItem of this.foodArr) {
                    foodItem.quantity = 0;
                    for (let cartItem of cartArr) {
                        if (cartItem.foodId == foodItem.foodId) {
                            foodItem.quantity = cartItem.quantity;
                        }
                    }
                }
                this.foodArr.sort();
            })
            .catch(error =>{
                console.error(error);
            })
        },
        minus(index){
            //首先做登录判断
            if(this.user === null){
                this.$router.push({
                    path : '/login'
                });
                return ;
            }

            if(this.foodArr[index].quantity > 1){
                //做update
                this.updateCart(index, -1);
            }else{
                //做删除
                this.removeCart(index);
            }
        },
        add(index){
            //首先做登录判断
            if(this.user === null){
                this.$router.push({
                    path : '/login'
                });
                return ;
            }

            if(this.foodArr[index].quantity === 0){
                //做insert
                this.savaCart(index);
            }else{
                //做update
                this.updateCart(index, 1);
            }
        },
        updateCart(index, num){
            let url_updateCart = `/CartController/updateCart/${this.user.token.token}/${this.businessId}/${this.foodArr[index].foodId}/${this.foodArr[index].quantity + num}`;
            this.$axios.put(url_updateCart)
            //     `CartController/updateCart/${this.user.token.token}`, this.$qs.stringify({
            //     businessId : this.businessId,
            //     //userId : this.user.userId,
            //     foodId : this.foodArr[index].foodId,
            //     quantity : this.foodArr[index].quantity + num
            // }))
            .then(response => {
                if(response.data.result !== 0){
                //if(response.data.linenum === 1){
                    //此食品数量要更新为1或-1；
                    this.foodArr[index].quantity += num;
                    this.foodArr.sort();
                }else{
                    alert('向购物车中更新食品失败！');
                }
            })
            .catch(error => {
                console.error(error);
            });
        },
        removeCart(index){
            let url_removeCart = `/CartController/removeCart/${this.user.token.token}/${this.businessId}/${this.foodArr[index].foodId}`;
            this.$axios.delete(url_removeCart)
            //     `CartController/removeCart/${this.user.token.token}`, this.$qs.stringify({
            //     businessId : this.businessId,
            //     //userId : this.user.userId,
            //     foodId : this.foodArr[index].foodId,
            // }))
            .then(response => {
                if(response.data.result !== 0){
                //if(response.data.linenum[0] === 1){
                    //此食品数量要更新为0；视图的减号和数量要消失
                    this.foodArr[index].quantity = 0;
                    this.foodArr.sort();
                }else{
                    alert('从购物车中删除食品失败！');
                }
            })
            .catch(error => {
                console.error(error);
            });
        },
        savaCart(index){
            let url_saveCart = `/CartController/saveCart/${this.user.token.token}/${this.businessId}/${this.foodArr[index].foodId}`;
            this.$axios.post(url_saveCart)
            //     `CartController/saveCart/${this.user.token.token}`, this.$qs.stringify({
            //     businessId : this.businessId,
            //     //userId : this.user.userId,
            //     foodId : this.foodArr[index].foodId,
            // }))
            .then(response => {
                if(response.data.result !== 0){
                //if(response.data.linenum === 1){
                    //此食品数量要更新为1
                    this.foodArr[index].quantity = 1;
                    this.foodArr.sort();
                }else{
                    alert('向购物车中添加食品失败！');
                }
            })
            .catch(error => {
                console.error(error);
            });
        },
        toOrder(){
            this.$router.push({
                path:'/orders',
                query: {
                    businessId: this.businessId
                }
            });
        }
    },
    computed:{
        //食品总数量
        totalQuantity(){
            let quantity = 0;
            for(let item of this.foodArr){
                quantity += item.quantity;
            }
            return quantity;
        },
        //食品总价格
        totalPrice(){
            let total = 0;
            for(let item of this.foodArr){
                total += item.quantity * item.foodPrice;
            }
            return total;
        },
        //结算总价格，食品总价格加上配送费
        totalSettle(){
            return this.totalPrice + this.business.deliveryPrice;

        }
    },
    components:{
        PageRollback
    },
}
</script>

<style scoped>
    /*********总容器************/
.wrapper{
    height: 100%;
    width: 100%;
}

/*********header部分********/
.wrapper header{
    width: 100%;
    height: 12vw;

    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;

    position: fixed;
    left: 0;
    top: 0;
    /* 给予高层叠级别 */
    z-index: 1000;

    /* 位置上下左右居中 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/*********商家图片部分*********/
.wrapper .business-logo{
    width: 100%;
    height: 35vw;
    margin-top: 12vw; /* 利用外边距隔开header部分 */

    display: flex;
    justify-content: center;
    align-items: center;
}
.wrapper .business-logo img{
    width: 40vw;
    height: 30vw;
    border-radius: 5px; /* 尖角变圆角 */
}

/*********商家信息部分*********/
.wrapper .business-info{
    width: 100%;
    height: 20vw;

    display: flex;
    flex-direction: column; /* 竖着排列 */
    justify-content: center;
    align-items: center;
}
.wrapper .business-info h1{
    font-size: 5vw;
}
.wrapper .business-info p{
    font-size: 3vw;
    color: #666;
    margin-top: 1vw;
}

/*********食品列表部分********/
.wrapper .food{
    width: 100%;
    padding-bottom: 14vw;/* 添加底部固定元素高度的底部内边距，以避免内容被底部元素遮挡  */
}
.wrapper .food li{
    width: 100%;
    box-sizing: border-box;
    padding: 2.5vw;
    user-select: none;

    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wrapper .food li .food-left{
    display: flex;
    align-items: center;/* 子元素垂直居中 */
}
.wrapper .food li .food-left img{
    width: 20vw;
    height: 20vw;
}
.wrapper .food li .food-left .food-left-info{
    margin-left: 3vw;
}
.wrapper .food li .food-left .food-left-info h3{
    font-size: 3.8vw;
    color: #555;
}
.wrapper .food li .food-left .food-left-info p{
    font-size: 3vw;
    color: #888;
    margin-top: 2vw;
}
.wrapper .food li .food-right{
    width: 16vw;

    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wrapper .food li .food-right .fa-minus-circle{
    font-size: 5.5vw;
    color: #999;
    cursor: pointer;
}
.wrapper .food li .food-right .p{
    font-size: 3.6vw;
    color: #333;
}
.wrapper .food li .food-right .fa-plus-circle{
    font-size: 5.5vw;
    color: #0097EF;
    cursor: pointer;
}

/*********购物车部分**********/
.wrapper .cart{
    width: 100%;
    height: 14vw;

    position: fixed;
    left: 0;
    bottom: 0;

    display: flex;
}
.wrapper .cart-left {
    flex: 2; /*占据页面 2/3 */

    background-color: #505051;

    display: flex;
}
.wrapper .cart-left .cart-left-icon{
    width: 16vw;
    height: 16vw;

    box-sizing: border-box;
    border: solid 1.6vw #444;
    border-radius: 8vw;
    background-color: #3190E8;
    font-size: 7vw;
    color: #fff;

    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: -4vw;
    margin-left: 3vw;
    
    position: relative;
}
.wrapper .cart-left .cart-left-icon .cart-left-icon-quantity{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2.5vw;

    width: 5vw;
    height: 5vw;

    color: #fff;
    background-color: red;
    font-size: 3.6vw;
    

    position: absolute;
    right: -1.5vw;
    top: -1.5vw;
}
.wrapper .cart-left .cart-left-info p:first-child{
    font-size:  4.5vw;
    color: #fff;
    margin-top: 1vw;
}
.wrapper .cart-left .cart-left-info p:last-child{
    font-size:  2.8vw;
    color: #AAA;
}
.wrapper .cart .cart-right{
    flex: 1;
}  
/* 达到起送费时 */
.wrapper .cart-right .cart-right-item{
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    color:  #fff;
    background-color: #38CA73;

    font-size:  4.5vw;
    font-weight: 700;

    user-select: none; /* 禁止用户选择元素内的文本内容 */
    cursor: pointer; /*  当鼠标悬停在元素上时，将鼠标指针设置为指示链接的手型 */
}
/* 未达到起送费时 */
/* 只有鼠标样式和背景颜色的区别 */
/* 
.wrapper .cart-right .cart-right-item{
    width: 100%;
    height: 100%;
    
    display: flex;
    justify-content: center;
    align-items: center;

    color:  #fff;
    background-color: #535356;

    font-size:  4.5vw;
    font-weight: 700;

    user-select: none; 
}
*/

</style>